<template>
    <div class="login-box">
        <h3>OA系统管理员后台登录（管理员端）</h3>
        <el-form ref="form" v-bind:model="form" v-bind:rules="rules" label-width="80px">
            <el-form-item label="工号" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item class="flex-btn">
                <el-button type="primary" @click="onSubmit('form')"
                           id="TencentCaptcha" data-appid="2068453879" data-cbfn="onSubmit('form')">登录</el-button>
            </el-form-item>
            <el-form-item class="flex-btn">
                <el-button type="primary" @click="toLoginComponent" plain>切换普通用户登录=></el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "AdminLogin",
    created() {
        // window.addEventListener('storage', this.afterQRScan)
        if (window.TencentCaptcha === undefined) {
            let script = document.createElement('script')
            let head = document.getElementsByTagName('head')[0]
            script.type = 'text/javascript'
            script.charset = 'UTF-8'
            script.src = 'https://ssl.captcha.qq.com/TCaptcha.js'
            head.appendChild(script)
        }
    },
    data() {
        return {
            appid:'',
            randstr:'',
            ticket:'',
            form: {
                username: '201801',
                password: '123456'
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur'}
                ],
                password:[
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 3, max: 20, message: '密码长度在 3 到 20 个字符', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        onSubmit:function (formName){
            //表单格式验证
            this.$refs[formName].validate((valid) => {
                var vm = this;
                if (valid) {
                    //表单格式验证成功，接入腾讯防水墙进行图形验证码验证
                    let captcha = new window.TencentCaptcha('2068453879', (rsp) => {
                        console.log(rsp);
                        //response.ret==0代表前端图形验证成功准备发送randstr和ticket给后端进行二次验证，response.ret==2代表用户放弃验证
                        if (rsp.ret === 0) {
                            vm.appid = rsp.appid;
                            vm.randstr = rsp.randstr;
                            vm.ticket = rsp.ticket;
                            console.log(vm.appid+' '+vm.randstr+' '+vm.ticket);
                            //图形验证码验证成功，发送axios请求
                            vm.axios({
                                url: '/myapi/login',
                                method: 'post',
                                //使用data是body传参，使用params是query传参
                                data:{
                                    username:vm.form.username,
                                    password:vm.form.password,
                                    appid:vm.appid,
                                    randstr:vm.randstr,
                                    ticket:vm.ticket
                                }
                            }).then(function (response) {
                                console.log(response.data);
                                if(response.data.code===999){
                                    vm.$message.error('后端校验图形验证错误!');
                                }
                                else if(response.data.code===2003){
                                    vm.$message.error('用户名或密码错误!');
                                }
                                else if(response.data.code===200 && response.data.data.role === '系统管理员'){
                                    vm.$message({
                                        duration:600,
                                        message: '恭喜你，登录成功!',
                                        type: 'success'
                                    });
                                    //路由至 OA后台管理页面
                                    vm.$router.push("/home")
                                }
                                else {
                                    vm.$message.error('你不是系统管理员!');
                                }
                            });

                        } else {
                            this.$message({
                                message: '放弃了验证',
                                type: 'warning'
                            })
                        }
                    })
                    captcha.show()

                } else {
                    console.log('error submit!!');
                    this.$message.error('请输入正确的格式');
                    return false;
                }
            });
        }
        ,toLoginComponent:function () {
            this.$router.push("/")
        }
    }
}
</script>

<style scoped>
.login-box{
    width: 500px;
    height: 250px;
    border: 1px solid #2c3e50;
    margin: 150px auto;
    padding: 10px 50px 20px 20px;
    border-radius: 20px;
    box-shadow: 2px 2px 20px #2c3e50;
}
.flex-btn{
    float: left;
}
</style>
